<template>
  <div>
      <!-- /.u-menu -->
      <div class="u-main">
        <div class="u-tab-wrap">
          <ul class="u-tab clearfix">
            <li class="current"><a>我的信息</a></li></ul>
        </div>
        <div id="tab-box">
          <div id="repay_list_box" class="u-form-wrap" style="padding: 15px;">
            <div style="margin-bottom: 20px;">
              <el-table
                :data="messages"
                stripe
                style="width: 100%">
                <el-table-column
                  prop="messageId"
                  label="编号"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="messageTitle"
                  label="标题"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="messageContext"
                  label="内容">
                </el-table-column>
                <el-table-column
                  prop="messageSender"
                  label="发件人">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row)">详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!--分页-->
              <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="pageSizes"
                  :page-size="PageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="totalCount">
                </el-pagination>
            </div>
            </div>
            <div class="page-wrap"></div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
    export default {
      name: "",
      data(){
        return{
          messages:[],
          // 默认显示第几页
          currentPage:1,
          // 总条数，根据接口获取数据长度(注意：这里不能为空)
          totalCount:1,
          // 个数选择器（可修改）
          pageSizes:[1,2,3,4],
          // 默认每页显示的条数（可修改）
          PageSize:4,
        }
      },
      methods:{
        // 每页显示的条数
        handleSizeChange(val) {
          this.PageSize=val
          this.currentPage=1
          this.handleCurrentChange(1)  //刷新表格
        },
        // 显示第几页
        handleCurrentChange(val) {
          this.currentPage=val
          /*根据currentpage获取信息*/
          this.axios.post("/api/message/findsinglemessagepage",{pageNum:this.currentPage,pageSize:this.PageSize}).then((data)=>{
            this.messages=data.data.list
            this.totalCount=data.data.total
          })
        },
        handleClick(row) {
          alert('编号:'+row.messageId+'   标题:'+row.messageTitle+'   内容:'+row.messageContext+'   发件人:'+row.messageSender);
        }
      },
      /*初始化数据*/
      created() {
        this.axios.post("/api/message/findmessagelist").then((data)=>{
          this.messages=data.data.list
          this.totalCount=data.data.total
        })
      }
    }
</script>

<style scoped>
  @import  '../../assets/usercss/css/UserCSS.css';

</style>
